<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新增语义标签</title>
	<style>
		.header{
			width:100%;
			height:50px;
			line-height: 50px;
			border:1px solid #eee222;
			font-size: 30px;
			color:#330054;
		}
		.footer{
			width:100%;
			height:60px;
			background:red;
			line-height: 60px;
			border:1px solid yellow;
			color:yellowgreen;
		}
		.footer mark{
			background: green;
			color:yellow;
		}
	</style>
</head>
<body>
	<header class="header" id="header">
		我是头部标签
	</header>
	<article>
		<hgroup>
			<h2>主标题</h2>
			<h3>副标题</h3>
		</hgroup>
		<section>
			<p>第1部分</p>
		</section>
		<section>
			<p>第2部分</p>
		</section>
		<section>
			<p>第3部分</p>
		</section>
		<section>
			<p>第4部分</p>
		</section>
	</article>
	<figure>
		<img src="img/1.png" alt="">
		<figcaption>这是一个女的。。</figcaption>
	</figure>
	<menu>
		<ul>
			<li>功能1</li>
			<li>功能2</li>
			<li>功能3</li>
			<li>功能4</li>
		</ul>
	</menu>
	<form oninput="op1.value=parseInt(ip1.value)+parseInt(ip2.value)">
		<input id="ip1" type="text">+
		<input id="ip2" type="text">
		<output id="op1" for="ip1 ip2"></output>
	</form>
	<footer class="footer" id="footer">
		我是<mark>尾部</mark>标签
	</footer>
</body>
</html>